const users = [
    { username: 'zhangsan', password: '123' },
    { username: 'lisisi', password: '456' }
];

const studentsData = [
    { id: 1, name: '汪印星', age: '24', gender: '男' },
    { id: 2, name: '李寅峰', age: '22', gender: '男' },
    { id: 3, name: '钟鑫茂', age: '22', gender: '女' },
    { id: 4, name: '张胜江', age: '24', gender: '男' },
    { id: 5, name: '徐阳', age: '25', gender: '男' },
    { id: 6, name: '杨烨', age: '26', gender: '男' },
    { id: 7, name: '杨恩', age: '25', gender: '女' },
    { id: 8, name: '夏琪琦', age: '22', gender: '女' },
    { id: 9, name: '罗雷', age: '26', gender: '男' },
    { id: 10, name: '陈阳吉', age: '22', gender: '男' }
];
let lastId = studentsData[studentsData.length - 1].id;

// ------------ 右侧 div 点击、input 点击 添加效果
let main_info_arr = document.querySelectorAll(".main_informationDisplay>div");  // 所有 div
let h2_arr = document.querySelectorAll(".main>section>h2"); // 所有 h2

main_info_arr.forEach((item, index) => {
    item.onclick = function () {
        main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked"));    // 去掉所有 div 框
        item.classList.add("main_informationDisplay_checked"); // 某一个 div 添加边框
        h2_arr.forEach(item => item.classList.remove("menu_checked"));// 去掉所有 h2 样式
        h2_arr[index].classList.add("menu_checked");
    }
});
// ------ h2 点击改变样式
h2_arr.forEach((item, index) => {
    item.addEventListener("click", () => {
        h2_arr.forEach(item => item.classList.remove("menu_checked"));
        item.classList.add("menu_checked");
        main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked"));
        main_info_arr[index].classList.add("main_informationDisplay_checked");
    });
});

// --------------- 渲染学生数据
let tbody = document.querySelector(".studentsList>tbody");
function render(arr = studentsData) {
    tbody.innerHTML = arr.map(item =>
        `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender}</td>
            <td>
                <input type="button" value="修改" data-func="modify" data-index='${item.id}'>
                <input type="button" value="删除" data-func="delete" data-index='${item.id}'>
            </td>
        </tr>`
    ).join("");
}
render();

// ------ 公用元素
let name, age, gender;
let tips = document.getElementById("tips");

// -------------- 新增学生
let add_btn = document.getElementById("addBtn");
add_btn.onclick = function () {
    name = document.querySelector("#addForm .name");
    age = document.querySelector("#addForm .age");
    gender = document.getElementById("addForm").gender.value;
    if (name.value && age.value) {
        studentsData.push({ id: lastId + 1, name: name.value, age: age.value, gender: gender ? gender : "男" });
        lastId++;
        render();
    }
    name.value = "";
    age.value = "";
}
// -------------- 修改学生 从表格里点击 修改
let modify_btn = document.getElementById("modifyBtn");  // 右侧 确认修改 按钮
let student;
tbody.onclick = function (event) {
    if (event.target.nodeName == "INPUT") {
        if (event.target.dataset.func == "modify") {    // 点击修改
            modify_btn.disabled = false;
            name = document.querySelector("#modifyForm .name");
            age = document.querySelector("#modifyForm .age");
            gender_Arr = document.querySelectorAll("#modifyForm [type='radio']");
            [student] = studentsData.filter(item => item.id == event.target.dataset.index); // 获得需要修改的学生对象
            name.value = student.name;
            age.value = student.age;
            student.gender == "男" ? gender_Arr[0].checked = true : gender_Arr[1].checked = true;
        } else if (event.target.dataset.func == "delete") {  // 点击删除
            studentsData.forEach((item, index) => {
                if (item.id == event.target.dataset.index) {
                    let result = confirm("是否删除：" + item.name + "?");
                    result ? studentsData.splice(index, 1) : "";
                }
            });
            render();
        }
    }
}
// ----------  点击修改学生
modify_btn.onclick = function () {
    name = document.querySelector("#modifyForm .name").value;
    age = document.querySelector("#modifyForm .age").value;
    gender = document.getElementById("modifyForm").gender.value;

    for (let i = 0; i < studentsData.length; i++) {
        if (studentsData[i].id == student.id) {
            studentsData.splice(i, 1, { id: student.id, name, age, gender });
            break;
        }
    }
    render();
}

// -------- 查询学生
let query_btn = document.getElementById("queryBtn");
query_btn.onclick = function () {
    let type = document.querySelector("#queryForm>select").value;
    let content = document.querySelector("#queryForm [type='text']").value;
    let arr;
    if (content) {
        arr = studentsData.filter(item => item[type] == content);
    }
    arr.length ? tips.innerText = "" : tips.innerText = "无数据";
    render(arr);
}

// ---------- 点击左侧 学生列表 刷新显示区域
let student_list = document.querySelector(".main>section>h2:first-child");
student_list.addEventListener("click", () => {
    render();
    tips.innerText = "";
})